<template>
  <div class="flow-container">
    <VueFlow
      v-model="elements"
      class="vue-flow-basic-example"
      :default-zoom="0.8"
      :min-zoom="0.2"
      :max-zoom="1.5"
    >
      <Background :pattern-color="'#aaa'" :gap="20" />
      <Controls />
      <MiniMap class="custom-minimap"/>
    </VueFlow>
  </div>
</template>

<script setup>
import { VueFlow } from '@vue-flow/core'
import { Background } from '@vue-flow/background'
import { Controls } from '@vue-flow/controls'
import { MiniMap } from '@vue-flow/minimap'
import { ref, watch } from 'vue'
import { convertJsonToElements } from '@/utils/topology.js'
import '@vue-flow/core/dist/style.css'
import '@vue-flow/core/dist/theme-default.css'
import '@vue-flow/controls/dist/style.css'
import '@vue-flow/minimap/dist/style.css'

const props = defineProps({
  topology: {
    type: [String, Array, Object],
    required: true
  }
})

const elements = ref([])

// 监听拓扑数据变化
watch(() => props.topology, (newVal) => {
  try {
    const data = typeof newVal === 'string' ? JSON.parse(newVal) : newVal
    elements.value = convertJsonToElements(Array.isArray(data) ? data : [data])
  } catch (error) {
    console.error('拓扑数据格式错误:', error)
  }
}, { immediate: true })
</script>

<style>
.flow-container {
  width: 100%;
  height: 100%;
}

.vue-flow-basic-example {
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom right, #f8f9fa, #e9ecef);
}

:deep(.vue-flow__node) {
  padding: 15px 25px;
  border-radius: 8px;
  font-size: 14px;
  text-align: center;
  width: 150px;
  min-height: 50px;
  height: auto;
  word-wrap: break-word;
  white-space: normal;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  border-width: 2px;
  border-style: solid;
}

:deep(.vue-flow__node:hover) {
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}
</style>
